<template>
    <div ref="editor" class="text-editor"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import E from 'wangeditor'
import { uploadCourseImage } from '@/services/course'

export default Vue.extend({
    name: "TextEditor",
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    // 组件已经渲染好，可以初始化操作 DOM 了
    mounted () {
        this.initEditor()
    },
    methods: {
        initEditor () {
            const editor = new E(this.$refs.editor as any)
            // 注意：事件监听必须在 create 之前
            // 配置 onchange 回调函数
            editor.config.onchange = (value: string) => {
                // console.log('change 之后最新的 html', value)
                this.$emit('input', value)
            }
            editor.create()
            // 注意： 设置初始值，必须在 create 之后
            editor.txt.html(this.value)
            
            editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
                debugger
                // 把用户选择的 resultFiles 上传到服务器
                const fd = new FormData()
                fd.append('file', resultFiles[0])
                const { data } = await uploadCourseImage(fd)
                if (data.code === '000000') {
                    console.log(data)
                }

                insertImgFn(data.data.name) // 根据富文本地址生成 img 标签插入富文本编辑器内容中
            }
        }
    }
})
</script>

<style lang="scss" scoped></style>
